<template>
  <div class="owner-voice">
    <h2 class="wow" style="visibility: visible">业主访谈</h2>
    <div class="swiper-box wow" style="visibility: visible">
      <swiper
        class="swiper-container"
        :loop="true"
        slidesPerView="auto"
        :centeredSlides="true"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(item,index) in List" :key="index">
          <div class="img-box">
            <img
              :src="item.image"
            />
          </div>
          <div class="info-box">
            <div class="container">
              <div class="topLeft">
                <p>{{ item.name }}</p>
                <p>{{ item.title }}</p>
                <div>
                  <p>
                    <i></i>
                    {{ item.mianji }}
                  </p>
                </div>
              </div>
              <div class="text">
                <p>{{ item.dis }}</p>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <h2 class="wow" style="visibility: visible">视频采访</h2>
    <div class="swiper-box wow" style="visibility: visible">
      <swiper
        class="swiper-container"
        :loop="true"
        slidesPerView="auto"
        :centeredSlides="true"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
        v-for="(item,index) in List" :key="index">
          <div class="img-box">
            <img :src="item.image"/>
            <img
            class="video_img"
              src="/src/assets/img/voice001.png"
            />
          </div>
          <div class="info-box">
            <div class="container">
                <div class="topLeft">
                <p>{{ item.name }}</p>
                <p>{{ item.title }}</p>
                <div>
                  <p>
                    <i></i>
                    {{ item.mianji }}
                  </p>
                </div>
              </div>
              <div class="text">
                <p>{{ item.dis }}</p>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="button-wrap">
      <div class="btn">定制我修方案</div>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'
import { ref } from 'vue'
const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {}

const List = ref([
    {
        image:'https://www.shbotao.net//uploads/allimg/20211213/be55fadfb6ae82249366458a8a677feb.jpg',
        name:'王先生',
        title:'保利锦江里',
        mianji:'100-140㎡',
        dis:'这是一段关于采访的内容这是，一段关于采访的内容这是，一段关于采访的内容这是一段，关于采访的内容这是一段关于采访的内容这是一这是一段关于采访的内容这是一段关于采访的内容这，一段关于采访的内容这是一段关于采访的内容这是一段关于采访的内容这，这是一段关于采，访的内容，这是一段关于采，访的内容，这是一段关于采，访的内容'
    },
    {
        image:'https://www.shbotao.net//uploads/allimg/20211213/be55fadfb6ae82249366458a8a677feb.jpg',
        name:'王先生',
        title:'保利锦江里',
        mianji:'100-140㎡',
        dis:'这是一段关于采访的内容这是，一段关于采访的内容这是，一段关于采访的内容这是一段，关于采访的内容这是一段关于采访的内容这是一这是一段关于采访的内容这是一段关于采访的内容这，一段关于采访的内容这是一段关于采访的内容这是一段关于采访的内容这，这是一段关于采，访的内容，这是一段关于采，访的内容，这是一段关于采，访的内容'
    },
    {
        image:'https://www.shbotao.net//uploads/allimg/20211213/be55fadfb6ae82249366458a8a677feb.jpg',
        name:'王先生',
        title:'保利锦江里',
        mianji:'100-140㎡',
        dis:'这是一段关于采访的内容这是，一段关于采访的内容这是，一段关于采访的内容这是一段，关于采访的内容这是一段关于采访的内容这是一这是一段关于采访的内容这是一段关于采访的内容这，一段关于采访的内容这是一段关于采访的内容这是一段关于采访的内容这，这是一段关于采，访的内容，这是一段关于采，访的内容，这是一段关于采，访的内容'
    },
    {
        image:'https://www.shbotao.net//uploads/allimg/20211213/be55fadfb6ae82249366458a8a677feb.jpg',
        name:'王先生',
        title:'保利锦江里',
        mianji:'100-140㎡',
        dis:'这是一段关于采访的内容这是，一段关于采访的内容这是，一段关于采访的内容这是一段，关于采访的内容这是一段关于采访的内容这是一这是一段关于采访的内容这是一段关于采访的内容这，一段关于采访的内容这是一段关于采访的内容这是一段关于采访的内容这，这是一段关于采，访的内容，这是一段关于采，访的内容，这是一段关于采，访的内容'
    },
])
</script>

<style>
.bt-owner-voice .owner-voice {
  padding: 1rem 0;
}

.bt-owner-voice .owner-voice h2 {
  margin-bottom: 0.65rem;
}
.bt-owner-voice .owner-voice .swiper-slide {
  width: 80% !important;
}

.bt-owner-voice .owner-voice .swiper-slide .img-box {
  width: 90%;
  display: flex;
  align-items: center;
  height: 4.44rem;
  margin: auto;
  position: relative;
}
.bt-owner-voice .owner-voice .swiper-slide .img-box .video_img{
    opacity: 0;
    z-index: 11;
    position: absolute;
    right: .22rem;
    bottom: -.2rem;
    width: .9rem;
    height: .9rem;
    background: #fff;
    border-radius: 50%;
    transition: all .3s;
    box-shadow: 0 0 .1rem rgba(237, 84, 1, .2);
}
.bt-owner-voice .owner-voice .swiper-slide-active .img-box {
  width: 100%;
}
.bt-owner-voice .owner-voice .swiper-slide .info-box {
  position: relative;
  transition: all 0.3s;
  opacity: 0;
}
.bt-owner-voice .owner-voice .swiper-slide-active .info-box {
  opacity: 1;
}
.bt-owner-voice .owner-voice .swiper-slide-active .img-box .video_img {
  opacity: 1;
}
.bt-owner-voice .owner-voice .swiper-slide .topLeft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  margin-bottom: 0.25rem;
}

.bt-owner-voice .owner-voice .swiper-slide .topLeft > p {
  font-size: 0.36rem;
  color: #000;
  font-weight: 700;
}

.bt-owner-voice .owner-voice .swiper-slide .topLeft > div {
  display: flex;
}

.bt-owner-voice .owner-voice .swiper-slide .topLeft > div p {
  font-size: 0.22rem;
  color: #000;
  display: flex;
  align-items: center;
  font-weight: 700;
}

.bt-owner-voice .owner-voice .swiper-slide .topLeft > div p i {
  background-size: 100% 100% !important;
  width: 0.23rem;
  height: 0.23rem;
  display: inline-block;
  margin-right: 0.1rem;
}

.bt-owner-voice .owner-voice .swiper-slide .topLeft > div p:first-of-type i {
  background: url(/src/assets/img/pingfang.png) no-repeat;
}
.bt-owner-voice .owner-voice .container .text {
  padding: 0.42rem 0 0.63rem;
  font-size: 0.22rem;
  color: #666;
  line-height: 0.4rem;
}
.bt-owner-voice .owner-voice .container .text p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.bt-owner-voice .owner-voice .button-wrap .btn {
  margin: 0 auto;
  border: 0.02rem solid #dd292c;
  width: 6.9rem;
  background-color: unset;
  box-shadow: none;
  text-shadow: none;
  font-size: 0.24rem;
  color: #000;
}
</style>